<!doctype html> 
<html lang="zh_CN">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./fonts/boostrapicons/bootstrap-icons.css">
    <title>jQuery入门</title>
  </head>
  <body>
      <div id="d1">这是#d1的元素</div>
      <h4 class="my">h4-1</h4>
      <h4 class="my">h4-2</h4>
      <h4 class="my">h4-3</h4>
      <h4 class="my">h4-4</h4>
      <input type="text" value="haoren">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/plugins/bootstrap/jquery.slim.min.js" ></script>
    <script src="./js/plugins/bootstrap/popper.min.js"></script>
    <script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
    <script>
        //$是jQuery中内置的一个函数。
        //ready函数的作用当页面加载完成之后执行
        // $(document).ready(function(){
        //     console.log("页面加载完成之后执行");
        // });
   
        //ready函数的简化版本
        $(function(){
            console.log("页面加载完成之后执行--1");
            //定义jQuery的代码
            //使用js获得#d1的元素
           let jsObj= document.getElementById("d1");
           //使用jquery的选择器获得#d1元素
           let jqObj=$("#d1");
           //通过js的API获得的是js的对象。
           //通过jQuery的API获得得是jQuery对象。
           console.log(jsObj,jqObj);
           //js对象转成jQuery对象
            let jqObj2= $(jsObj);
            console.log(jqObj2);
            //jQuery对象转成js对象
            let jsObj2=jqObj.get(0);
            console.log(jsObj2);
 
            //根据类选择器获得元素
            let obj=$(".my");
            console.log(obj);

           //获得文档中第一个input元素
           let input= $("input:first");
           console.log(input.val("李四"));


        })
    </script>
  </body>
</html>